<template>
  <div>
      <h3>添加新商品</h3>
      <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="商品名称">
              <el-input v-model="form.productName"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
              <el-input v-model="form.price"></el-input>
          </el-form-item>

          <el-form-item label="商品图片">
              <el-upload
                      name="file"
                      list-type="picture-card"
                      class="avatar-uploader"
                      action="http://localhost:9999/user/upload"
                      :show-file-list="true"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :file-list="fileList"
              >
                  <i class="el-icon-plus"></i>

                  <!--放大显示图片预览的对话框-->
                  <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>

              </el-upload>

          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="onSubmit">创建</el-button>
              <el-button>取消</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                productName: '',
                price: '',
                photo: []
            },
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: []
        }
    },
    methods: {
        onSubmit() {
            // 发送异步请求，保存新商品
            console.log('fileList', this.fileList)

            // 如何获取当前多图片上传组件中的图片路径
            this.form.photo = []
            for (let i = 0; i < this.fileList.length; i++) {
                let file = this.fileList[i]
                this.form.photo.push(file.response)
            }

            this.$axios.post(`/product/add`,this.form).then(r=>{
                alert("商品添加成功")
            })

            console.log('form', this.form)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.fileList = fileList
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        // 文件上传成功后
        handleAvatarSuccess(res, file) {
            console.log('res', res)
            console.log('file', file)
            this.fileList.push(file)
        },
        // 文件上传之前
        beforeAvatarUpload(file) {
            // 判断要上传的文件类型是否是图片
            const isJPG = file.type === 'image/jpeg';
            // 1kb=1024byte  1mb=1024kb  1gb=1024mb
            // 判断要上传的文件大小是否超过2mb
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
